<!DOCTYPE html>
<html lang="en">
<head>
	<title>Scriptaculous Compatibility :: Examples :: ProtoLove</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="../src/Array.js"></script>
	<script type="text/javascript" src="../src/Class.js"></script>
	<script type="text/javascript" src="../src/DOM.js"></script>
	<script type="text/javascript" src="../src/Function.js"></script>
	<script type="text/javascript" src="../src/Number.js"></script>
	<script type="text/javascript" src="../src/Object.js"></script>
	<script type="text/javascript" src="../src/String.js"></script>
	<script type="text/javascript" src="../src/plugins/scriptaculous.compat.js"></script>
	<script type="text/javascript" src="../lib/scriptaculous/effects.js"></script>
	<link type="text/css" rel="stylesheet" href="css/screen.css" media="screen" />
</head>
<body>

<div id="mover">
	Mover!<br>
	Mover!<br>
	Mover!<br>
	Mover!<br>
	Mover!<br>
	Mover!<br>
</div>

<div id="scripty_morph_demo">
<div>Texas Longhorns</div>
<div>Florida Gators</div>
<div>Notre Dame Fighting Irish</div>
<div>UCLA Bruins</div>
<div>Tennesee Volunteers</div>
</div>

<script type="text/javascript">
	$('mover').onclick = function() {
		Effect.BlindDown($('mover'));
	};

Array.prototype.shuffle = function() {
  return this.sort(function() {
		return Math.random() > 0.5 ? 1 : -1;
	});
};

var divs = $A($('scripty_morph_demo').getElementsByTagName('div')).each(function(el) {
	el.style.height = '36px';
	el.style.fontSize = '28px';
});

function shuffleList() {
	divs.shuffle().each(function(e, i) {	
		e.morph('top:' + i*e.style.height + 'px', { duration: 0.4 }); 
  });
}
$('scripty_morph_demo').observe('click', shuffleList);

</script>

</body>
</html>